Cloudflare StreamでライブストリーミングのAV1サポートが発表されました！[open beta]

Cloudflare Streamで次世代コーデックであるAV1でのライブ配信をサポートします。これまでの半分のビットレートで同等の画質での再生が可能になります。現在open betaですが実際にライブストリーミングしたようすなどをまとめます。

#Cloudflare Stream

#Cloudflare

清水俊也

2022.11.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

清水です。Cloudflareの動画配信プラットフォームサービスCloudflare StreamでAV1コーデックによるライブ配信&録画配信のサポートが発表されました！（2022/10/06付でThe Cloudflare Blogにポストされたアップデート情報になります。）

Bringing the best live video experience to Cloudflare Stream with AV1

Cloudflare Streamでは通常、H.264/AVCのコーデックで動画配信を行っています。（コーデックについてはFAQより。）しかし動画配信の高画質化を考えると次世代のコーデックの使用は必須です。今後は4K解像度やさらに上の8K解像度の一般化、VR対応での高解像での配信も多くなってくるかと思います。この次世代コーデックへの対応による帯域幅の削減という点に対し、Cloudflare Streamでは次世代の動画コーデックの1つで、従来のH.264/AVCより46%少ない帯域幅（ビットレート）で同画質の配信を実現できるAV1コーデックをサポートすることを発表しました。

最近GAとなったStream Liveに対するアップデートになりますが、このAV1コーデックサポートについては現段階ではまだbeta扱い（open beta）となっています。実際にAV1コーデックを使ったライブストリーミングを試してみることができますが、仕様など変更となる可能性がある点に注意しましょう。また使ってみて気になった点などあればフィードバックを行いましょう。

本エントリではこのCloudflare StreamのAV1コーデックサポートについて、実際に動画を視聴ならびにライブストリーミングを行ってみたのでそのようすをまとめてみたと思います。

AV1コーデック！

まずは本サポートのキモとなるAV1コーデックについて簡単におさらいしておきましょう。動画配信の際、基本的にその映像と音声は圧縮された状態で再生端末に届けられます。この動画圧縮技術については様々なものがありますが、代表的なものを圧縮効率やその世代などからまとめると、DVD時代のMPEG-2、Blu-ray時代のH.264/AVC、そしてH.264の後継のH.265/HEVCなどとなるかと思います。（あくまでも筆者の主観でのリストアップですが。）

現在よく使われているのはH.264/AVCやH.265/HEVCなどで、AV1コーデックはこれらよりもさらに次世代のコーデック、動画圧縮技術といえます。基本的に動画圧縮技術が進化することにより、同じビットレートでもより高画質となります。逆に言えば、一定の画質のために必要なビットレート（ファイルサイズ）が減るわけですね。

AV1コーデックがこの動画圧縮技術の点でいかにすごいか、という点については以下ブログエントリが詳しいです。

AWS Elemental MediaConvertに高圧縮が可能な最新エンコード規格「AV1」がやってきた!! ので比較動画を作ってみた | DevelopersIO

またH.265/HEVCではパテント（特許）まわりが複雑になってしまっている、といわれています。（上記ブログや、Wikipediaなどにも記載がありますね。）AV1コーデックについてはオープンでありロイヤリティフリーということでこの点もクリアされています。

そんなAV1コーデック、圧縮率が高いこともありエンコード（圧縮処理）に時間がかかり、また動画再生時のデコード（解凍処理）にもCPUパワーを必要とする、となかなか実用化までにハードルがある、というのが筆者が2年ほど前に持った印象でした。これをなんとライブストリーミングで実用化しようとするわけです。冒頭のCloudvflareのBlogによると、最新の状況として再生端末となるスマートフォンでは、AV1ハードウェアデコーダを内蔵する機種が登場し始めているとのことで、例えばGoogle Pixelなどがこれに当たるようです。またiOSでも将来的にメディア再生APIでAV1をサポートする予定など、AV1コーデックを再生する側の準備については徐々に出来上がりつつあるといえます。またエンコードの点については、Cloudflare StreamでのAV1コーデック対応は専用のハードウェアエンコーダーを用いることでリアルタイムエンコードを実現しているということです。

サンプル動画でAV1コーデックを体感してみる

さてこのAV1コーデックの威力、Cloudflare Streamのドキュメントで紹介されているURLにて視聴できる動画（どこかの都市の街並みですね）でわかりやすく体感できるかと思います。

AV1 playback (beta) · Cloudflare Stream docs

上記のドキュメント内、Get startedに記載されているURL（「Example DASH manifest URL, with betaCodecSuggestion=av1 query parameter」のところ）を、DASH Reference Clientで再生してみました。（OSはmacOS、ブラウザはGoogle Chromeを使用しています。）

ビットレートは以下5種類が選択できます。後ろのカッコ内は解像度を示していますね。

400 kbps (426x240)
800 kbps (640x360)
1800 kbps (854x480)
3600 kbps (1280x720)
5200 kbps (1920x1080)

例えば少し低めのビットレート・解像度として800 kbps (640x360)を選択してみましょう。以下のように、割と映像が破綻せずに視聴できていることが確認できるかと思います。

比較として、通常のAV1コーデックでない場合も確認してみましょう。先ほどのURLからクエリ部分（?betaCodecSuggestion=av1）を除いたURLを再生してみます。（これが通常のコーデック、H.264/AVCでの配信となります。）

ビットレートとしては以下5種類が選択できます。解像度に対してAV1コーデックよりも高いビットレートとなっていますね。

800 kbps (426x240)
1600 kbps (640x360)
3600 kbps (854x480)
7200 kbps (1280x720)
10400 kbps (1920x1080)

AV1コーデックととの比較のため、解像度640x360を選択してみましょう。ビットレートはAV1コーデックの倍の1600 kbpsあるわけですが、画質としてはAV1コーデックと同様ぐらいかと思います。

AV1コーデックはCloudflare Streamで通常用いられているH.264/AVCより46%少ないビットレートで同画質を実現すると言われていますが、このとおり、およそ半分のビットレートで同等の画質を維持できているのが確認できるかと思います。

AV1コーデックなライブ配信をしてみる

AV1コーデックでの配信をサンプル動画で確認してみました。現在オープンベータではありますが、実際にAV1コーデックでライブストリーミングしてみることも可能です。実際にやってみましょう！

通常と同じ手順でライブ入力（Live Input）を作成します。

接続情報をStreaming Softwareに設定して、映像を打ち上げます。今回はiPhone XS上のZixi ONAIRを使用しました。（具体的な設定内容についてはこちらのエントリをご参照ください。）

ドキュメントに記載のとおり、再生URLがAV1コーデックでは異なります。URLの後ろにクエリ文字列として?betaCodecSuggestion=av1を付与するかたちです。なお、対応ブラウザなどにも制限があります。（例えばSafariでは現在のところAV1再生をサポートしていないようです。）ドキュメント（AV1 playback (beta) · Cloudflare Stream docs）を確認しておきましょう。

先ほどのサンプル動画ではDASHでの確認でしたので、今度はHLSで確認してみます。Cloudflare Streamのドキュメンの例を参考にVideo.jsを使ったHTMLページを作成しました。

Video.js · Cloudflare Stream docs

sourceタグのsrcで指定しているURLの書き換え、ならびにvideo-jsタグのwidth=1280 height=720の追加をしています。

<html>
  <head>
    <link
       href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css"
       rel="stylesheet"
       />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script>
  </head>
  <body>
    <video-js id="vid1" width=1280 height=720 controls preload="auto"/>
      <source
         src="https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/b665xxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.m3u8?betaCodecSuggestion=av\
1"
         type="application/x-mpegURL"
         />
    </video-js>
    <script>
      const vid = document.getElementById('vid1');
      const player = videojs(vid);
    </script>
  </body>
</html>

再生できました！

HLSマニフェストファイルも確認してみます。CODECS="av01.0.05M.08,mp4a.40.2"というようにavc01という記載があることから、AV1コーデックを使用していることが確認できます。

% curl "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/b665xxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.m3u8?betaCodecSuggestion=av1"
#EXTM3U
#EXT-X-VERSION:6
#EXT-X-INDEPENDENT-SEGMENTS
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="group_audio",NAME="original",LANGUAGE="en-20",DEFAULT=YES,AUTOSELECT=YES,URI="stream_t2_r999999999.m3u8?vodotfe=false"
#EXT-X-STREAM-INF:RESOLUTION=1280x720,CODECS="av01.0.05M.08,mp4a.40.2",BANDWIDTH=3479060,AVERAGE-BANDWIDTH=3479060,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r8.m3u8?vodotfe=false
#EXT-X-STREAM-INF:RESOLUTION=1920x1080,CODECS="av01.0.08M.08,mp4a.40.2",BANDWIDTH=6021960,AVERAGE-BANDWIDTH=6021960,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r9.m3u8?vodotfe=false
#EXT-X-STREAM-INF:RESOLUTION=854x480,CODECS="av01.0.04M.08,mp4a.40.2",BANDWIDTH=1767036,AVERAGE-BANDWIDTH=1767036,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r7.m3u8?vodotfe=false
#EXT-X-STREAM-INF:RESOLUTION=640x360,CODECS="av01.0.04M.08,mp4a.40.2",BANDWIDTH=1081468,AVERAGE-BANDWIDTH=1081468,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r6.m3u8?vodotfe=false
#EXT-X-STREAM-INF:RESOLUTION=426x240,CODECS="av01.0.01M.08,mp4a.40.2",BANDWIDTH=565053,AVERAGE-BANDWIDTH=565053,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r5.m3u8?vodotfe=false

クエリ文字列をつけない場合（通常のH.264/AVCコーデック）はこちらです。CODECSはavc1なのでH.264/AVCですね。

% curl "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/b665xxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.m3u8"
#EXTM3U
#EXT-X-VERSION:6
#EXT-X-INDEPENDENT-SEGMENTS
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="group_audio",NAME="original",LANGUAGE="en-20",DEFAULT=YES,AUTOSELECT=YES,URI="stream_t2_r999999999.m3u8?vodotfe=false"
#EXT-X-STREAM-INF:RESOLUTION=1920x1080,CODECS="avc1.640028,mp4a.40.2",BANDWIDTH=1702795,AVERAGE-BANDWIDTH=1633283,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r4.m3u8?vodotfe=false
#EXT-X-STREAM-INF:RESOLUTION=1280x720,CODECS="avc1.64001f,mp4a.40.2",BANDWIDTH=229434,AVERAGE-BANDWIDTH=229434,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r3.m3u8?vodotfe=false
#EXT-X-STREAM-INF:RESOLUTION=854x480,CODECS="avc1.64001e,mp4a.40.2",BANDWIDTH=216540,AVERAGE-BANDWIDTH=192037,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r2.m3u8?vodotfe=false
#EXT-X-STREAM-INF:RESOLUTION=640x360,CODECS="avc1.4d401e,mp4a.40.2",BANDWIDTH=192950,AVERAGE-BANDWIDTH=179314,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r1.m3u8?vodotfe=false
#EXT-X-STREAM-INF:RESOLUTION=426x240,CODECS="avc1.42c015,mp4a.40.2",BANDWIDTH=183552,AVERAGE-BANDWIDTH=167104,FRAME-RATE=30.000,AUDIO="group_audio"
stream_t1_r0.m3u8?vodotfe=false

まとめ

Cloudflare Streamでライブストリーミング時にAV1コーデックをサポートするアップデートについて確認してみました。なにせエンコードに時間がかかっていた印象ががあったAV1コーデック、ライブストリーミングでの実用化はまだまだ先の話かと思っていたのですが、もうすぐそこまで迫ってきていますね！GAが大変待ち遠しいなと思いました。また現状ではライブストリーミングならびにライブストリーミングを録画したもののみがAV1コーデックサポートの対象となるようですが、ファイルアップロードによるVOD動画配信でもサポートすることを期待しつつ、本エントリを締めくくりたいと思います。